<template>
 <div class="mainBox" v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
  <div class="code">
   <vue-qr :text="btc.erc20Address ? btc.erc20Address : ''" :size="170"></vue-qr>

   <div class="text">
    <h6>{{ btc.coinCode }} {{ $t('user.common.address') }}</h6>
    <h6>{{ btc.erc20Address }}</h6>
    <el-button  v-clipboard:copy="btc.erc20Address" v-clipboard:success="copy" round>{{ $t('user.common.copy') }}</el-button>
   </div>
  </div>

  <ul>
   <li v-html="t1"></li>
   <li v-html="t2"></li>
   <li v-html="$t('user.withdrawal.tabs.address.t3')"></li>
   <li v-html="$t('user.withdrawal.tabs.address.t4')"></li>
   <li v-html="$t('user.withdrawal.tabs.address.t5')"></li>
  </ul>
 </div>
</template>

<script>
import vueQr from 'vue-qr'

export default {
 name: "BTC",
 props: ['data', 'active', 'load'],
 data: () => ({
  btc: '',
  t1: '',
  t2: '',
  loading: true
 }),
 components: {
  vueQr
 },
 created() {
  console.log(this.load)
 },
 methods: {
  // 复制成功
  copy() {
   this.$message.success(this.$t('common.success.t4'))
  }
 },
 watch: {
  load(a, b) {
   console.log(a)
   this.loading = a;
  },
  active(a, b) {
   this.data.forEach(item => {
    if (item.coinCode === a) {
     this.btc = item
     this.t1 = this.$t('user.withdrawal.tabs.address.t1').replace('{{ btc.coinCode }}', this.btc.coinCode).replace('{{ btc.coinCode }}', this.btc.coinCode);
     this.t2 = this.$t('user.withdrawal.tabs.address.t2').replace('{{ btc.coinCode }}', this.btc.coinCode);
    }
   })
  },
  '$i18n.locale'(a, b) {
   this.t1 = this.$t('user.withdrawal.tabs.address.t1').replace('{{ btc.coinCode }}', this.btc.coinCode).replace('{{ btc.coinCode }}', this.btc.coinCode);
   this.t2 = this.$t('user.withdrawal.tabs.address.t2').replace('{{ btc.coinCode }}', this.btc.coinCode);
  }
 }
}
</script>

<style scoped lang="scss">
.mainBox {
 display: flex;
 flex-direction: column;

 .code {
  display: flex;
  align-items: center;
  padding: 50px 0;

  img {
   margin-right: 60px;
   width: 190px;
  }

  .text {
   h6 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #002445;
   }

   .el-button {
    border: 1px solid #002445;
    color: #002445;
    display: inline-block;
    padding: 6px 30px;
    border-radius: 100px;
    margin-top: 10px;
    cursor: pointer;
    transition: all 0.3s;
    height: 33px;

    &:hover {
     background-color: #396FB5;
     color: #fff;
    }
   }
  }
 }

 ul {
  display: flex;
  flex-direction: column;

  li {
   list-style-type: disc !important;
   color: #a1a5b3;
   font-size: 14px;
   line-height: 1.8em;
   position: relative;
   padding-left: 17px;

   &:after {
    width: 6px;
    height: 6px;
    position: absolute;
    border-radius: 100%;
    content: '';
    background-color: #a1a5b3;
    left: 0;
    top: 10px;
   }
  }
 }
}
</style>
